import 'package:flutter/material.dart';
import 'package:flutter_demo/pages/page_with_title.dart';
import 'package:flutter_demo/widgets/app_widgets.dart';

class TablePage extends PageWithTitle {
  const TablePage({super.key}) : super("表格布局(Table)");

  @override
  List<Widget> buildContentWidgets(BuildContext context) {
    return const [
      PrimaryTitle("简介"),
      BodyText("表格布局，对比网格布局，表格布局支持不同列采取不同的宽度"),
      AppSpacer.large,
      LabelText("示例表格宽度值（500）"),
      _Example(),
      AppSpacer.mini,
      UlItem("Table"),
      BodyText("表格布局，通常用于生成表单数据，每列可以单独指定宽度策略，设置表格样式"),
      LabelText("- children 这里需要通过TableRow来定义每一行的组件，竖直排列成表格"),
      LabelText("- columnWidths 表格每一列的宽度策略，这是个map，按照列序号进行绑定"),
      LabelText("- defaultColumnWidth 默认列宽度，默认值时填满剩余空间"),
      LabelText("    - FixedColumnWidth 固定宽度"),
      LabelText("    - FractionColumnWidth 比例宽度，按照表格宽度的百分比决定"),
      LabelText("    - FlexColumnWidth 展开，填满表格剩余空间，它默认权重1"),
      LabelText("    - IntrinsicColumnWidth 固有宽度，根据该列的所有单元格固有宽度决定列"
          "最终宽度，若设置flex，则以权重参与剩余空间的分配"),
      LabelText("    - MinColumnWidth 对比两个宽度策略取最小值，可以嵌套实现多个宽度策略的"
          "对比"),
      LabelText("    - MaxColumnWidth 对比两个宽度策略取最大值"),
      LabelText("- border 表格边框"),
      LabelText("- defaultVerticalAlignment 单元格内容在垂直方向上的对齐效果"),

      AppSpacer.large,
      UlItem("TableRow"),
      BodyText("表格行"),
      LabelText("- decoration 定义行样式"),
      LabelText("- children 单元格内容，特殊单元格样式可以在这里实现，统一样式通过Table属性"
          "设置"),
    ];
  }
}

class _Example extends StatelessWidget {
  const _Example();

  @override
  Widget build(BuildContext context) {
    return FittedBox(
      fit: BoxFit.fitWidth,
      child: SizedBox(
        width: 500,
        child: Table(
          columnWidths: const {
            0:FixedColumnWidth(40),
            1:FractionColumnWidth(0.1),
            2:FlexColumnWidth(),
            3:IntrinsicColumnWidth(flex: 2.0),
            4:IntrinsicColumnWidth(),
            5:MinColumnWidth(FixedColumnWidth(60),FractionColumnWidth(0.3)),
            6:MaxColumnWidth(FixedColumnWidth(60),FractionColumnWidth(0.3)),
          },
          border: TableBorder.all(color: Theme.of(context).colorScheme.outline),
          children:  [
            TableRow(
              decoration: BoxDecoration(color: Theme.of(context).colorScheme.surfaceContainer),
              children: const [
                Center(
                  child: Text("固定"),
                ),
                Center(
                  child: Text("百分比"),
                ),
                Center(
                  child: Text("展开"),
                ),
                Center(
                  child: Text("权重"),
                ),
                Center(
                  child: Text("自适应"),
                ),
                Center(
                  child: Text("取小"),
                ),
                Center(
                  child: Text("取大"),
                ),
              ],
            ),
            const TableRow(
              children: [
                Center(
                  child: Text("40"),
                ),
                Center(
                  child: Text("10%"),
                ),
                Center(
                  child: Text("权重1"),
                ),
                Center(
                  child: Text("权重2"),
                ),
                Center(
                  child: Text("xxxxxxxx"),
                ),
                Center(
                  child: Text("60，30%"),
                ),
                Center(
                  child: Text("60，30%"),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}
